<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-col :span="24" >
        <h4 style="margin:0">
          <span>举报信息</span>
        </h4>
        <div style="font-size:12px">平台自动回复：您的举报信息已经收到了，很抱歉给您带来不好的体验，在您的监督下牙记才会越做越好。</div>
      </el-col>
    </el-row>
   
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="i" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>

      <el-table-column prop="report.userInfo.userNick" label="ID" width="80"> </el-table-column>
      <el-table-column prop="date" label="时间" width="160">
         <template slot-scope="scope">
          {{timeFun(scope.row.report.created_at)}}
        </template>
      </el-table-column>    

      <el-table-column prop="" label="内容">
         <template slot-scope="scope">
          <div>{{scope.row.report.content}}</div>
          <div>
              <img v-for="(item,index) in scope.row.report.images" :key="index" @click="showImage(item)" :src="item" style="margin-right: 5px; width: 70px; height: 80px;"/>
            </div>
          <div><span class="colorOne" >举报标题：</span>{{titleFun(scope.row)}}</div>
        </template>
      </el-table-column>

      <el-table-column prop="report.userInfo.userPhone" label="联系方式" width="240"></el-table-column>
      <el-table-column prop="tui" label="分类" width="100">
         <template slot-scope="scope">
          {{typeFun(scope.row.report.target_type)}}
        </template>
      </el-table-column>
    </el-table>

     <el-dialog :visible.sync="imgstuts">
      <img width="100%" :src="titleImgurl" alt="">
    </el-dialog>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        imgstuts:false,
        titleImgurl:'',
        dialogVisible:false,
        value:'关注',
        checkleng:'',
        total:0,
        pageIndex:1,
        pageSize:10,
        currentPage4:1,
        tableData: []
      }
    },
    created(){
      this.getlist()
    },
    
    methods: {
       getlist() {
        const obj = {
          "pageIndex":this.pageIndex,
          "pageSize":this.pageSize
        };
       
        Http.getReportslist(obj)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
         
        })
        .catch( error => {
          
        })
      },
      typeFun(type) {
        if (type ==1) {
          return '文章'
        } else if (type == 2) {
          return '动态'
        } else if (type == 3) {
          return '视频'
        } else if (type == 4) {
          return '问题'
        } else if (type == 5) {
          return '回答'
        } else if (type == 6) {
          return '评论'
        }
      },  
       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getlist()
        
      },
      timeFun(val) {
        return getTime(val)
      },
      titleFun(row){
        if(row.article){
         
          return  row.article.articleTitle
        };
        if(row.video){
          return row.video.title
        };
        if(row.dynamic || row.hasOwnProperty('dynamic')){
          return row.report.content
        }
        if(row.problem || row.hasOwnProperty('problem')){
          return row.report.content
        }
      },
      //图片放大
      showImage(row){
        
        this.titleImgurl = row
        this.imgstuts = true
      },
      //选择 推荐
      handleSelectionChange(val) {
        this.checkleng = val
      },
    
     
    }
  }
</script>
<style  scoped>
.box{
  border-bottom:1px solid red;
}
.test{
    border:1px solid #ccc;
}
.drag-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    position: relative;
    
    background: #ddd;
    margin:20px 5px;
}
.ghostClass{
    opacity: 1;
}
.bottom{
    width: 200px;
    height: 50px;
    position: relative;
    background: blue;
    top:2px;
    left: 2px;
    transition: all .5s linear;
}
</style>
